<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            .nav {
                display: flex;
                width: 200px;
            }
            .nav div {
                width: 25%;
                border: 1px solid #000;
                text-align: center;
            }
            .list div {
                width: 200px;
                height: 200px;
                border: 1px solid;
                display: none;
                text-align: center;
                line-height: 200px;
            }
        </style>
    </head>
    <body>
        <div class="nav">
            <div>1</div>
            <div>2</div>
        </div>
        <div class="list">
            <div>1</div>
            <div>2</div>
        </div>
        <script src="../jquery-3.5.1.min.js"></script>
        <script>
            // var nav = document.querySelector('.nav').children;
            // var list = document.querySelector('.list').children;

            // for (let i = 0; i < nav.length; i++) {
            //     // nav[i].index = i;
            //     nav[i].onclick = function () {
            //         for (let j = 0; j < nav.length; j++) {
            //             nav[j].style.color = 'black';
            //             list[j].style.display = 'none';
            //         }
            //         this.style.color = 'red';
            //         // console.log(this.index);
            //         list[i].style.display = 'block';
            //     };
            // }
        </script>
    </body>
</html>
